<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="sipAddWinDialogVisible"
      title="添加SIP"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newSip"  label-width="auto">

        <el-form-item  style="font-weight: bold" label="标题">
          <el-input v-model="newSip.sipTitle"/>
        </el-form-item>

        <el-form-item label="展示顺序">
          <el-input-number style="width: 220px" min="0" v-model="newSip.sipOrder"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="内容说明">
          <el-input v-model="newSip.sipDescription" type="textarea"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="所属工序">
          <el-select v-model="newSip.processId" style="width: 150px">
            <el-option v-for="process in procezz" :value="process.processId" :label="process.processName"/>
          </el-select>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelnewSip">取消</el-button>
        <el-button type="primary" @click="newSipSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import processRequest from "@/api/process.js";
import sipRequest from "@/api/sip.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addSipComplete','cancelSipAdd'])

// 弹窗标记
let sipAddWinDialogVisible = ref(false);

let props = defineProps(["materialId","isShow"]);
// 编辑的单位对象
let newSip = ref({sipOrder:0});
// 查询的单位列表
let procezz = ref([]);

/**
 * 取消新增按钮事件
 */
function cancelnewSip(){
  newSip = ref({sipOrder:0});
  sipAddWinDialogVisible.value = false;
  emits("cancelSipAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  cancelnewSip();
  emits("cancelSipAdd")
}

/**
 * 新增提交
 */
function newSipSubmit(){
  if (newSip.value.processId) {
    processRequest.showByProcessId(newSip.value.processId,res=>{
      newSip.value.sipMaterialId = props.materialId;
      newSip.value.processName = res.data.processName;
      sipRequest.save(newSip.value,res=>{
        if(res.code === 200){
          ElMessage({
            type:"success",
            message:"新增单位成功"
          });
          // 关闭弹窗
          cancelnewSip();
          // 触发编辑完成的事件
          emits('addSipComplete',res.data);
        } else if (res.data == '标题不能为空') {
          ElMessage({
            type:"warning",
            message:"标题不能为空"
          });
        } else if (res.data == '展示顺序不能为空') {
          ElMessage({
            type:"warning",
            message:"展示顺序不能为空"
          });
        }  else {
          ElMessage({
            type:"warning",
            message:"新增SIP失败"
          });
        }
      });
    });
  } else {
    ElMessage({
      type:"warning",
      message:"所属工序必须选其一"
    });
  }

}

/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  sipAddWinDialogVisible.value = props.isShow;
});


onMounted(()=>{
  // 加载单位对象
  processRequest.listAll(res => {
    // 将查询的列表赋值给units
    procezz.value = res.data;
  })
})
</script>
<style scoped>

</style>